<template>
    <div class="energy">
        <div class="main">
            <div>
                <div class="title">健康度TOP5</div>
                <div class="content" ref="content1"></div>
            </div>
            <div>
                <div class="title">报警数量最多TOP5</div>
                <div class="content" ref="content2"></div>
            </div>
            <div>
                <div class="title">劣化度</div>
                <div class="content" ref="content3"></div>
            </div>
            <div>
                <div class="title">总体健康度情况</div>
                <div class="content" ref="content5"></div>
            </div>
            <div>
                <div class="title">总体报警情况</div>
                <div class="content" ref="content6"></div>
            </div>
            <div>
                <div class="title">总体劣化度情况</div>
                <div class="content" ref="content7"></div>
            </div>
        </div>
        <List ref="list" />
        <Lists ref="lists" />
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { requestApi } from '@/requset/api'
import List from '../AIOps/Warn/List.vue'
import Lists from '../Selfport/List.vue'
export default {
    data() {
        return {
            list: [200, 300, 400, 500, 600],
            active: 0,
        }
    },
    components: {
        List,
        Lists,
    },
    computed: {
        total() {
            return this.list.reduce((a, b) => {
                return a + b
            }, 0)
        },
        today() {
            let currentDate = new Date()
            currentDate.setDate(currentDate.getDate() - 15)
            let year = currentDate.getFullYear() // 获取当前年份
            let month = currentDate.getMonth() + 1 // 获取当前月份（注意月份是从0开始，所以需要加1）
            let day = currentDate.getDate() // 获取当前日期
            return `${year}年${month}月${day}日至今日累计检测15天`
        },
    },
    methods: {
        change(i) {
            this.active = i
        },
        draw1() {
            requestApi('get', 'statistics/healthTop5').then((res) => {
                let list = res.data.data

                let myChart = echarts.init(this.$refs.content1)
                let cate = []
                let barData = []
                list.map((item) => {
                    cate.push(item.device_name)
                    barData.push(item.health_grade)
                })
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    //图表位置
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '3%',
                        top: '3%',
                        containLabel: true,
                    },
                    //X轴
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        //不显示X轴刻度线和数字
                        splitLine: { show: false },
                        axisLabel: { show: false },
                    },
                    yAxis: {
                        type: 'category',
                        data: cate,
                        //升序
                        inverse: true,
                        splitLine: { show: false },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA',
                                fontSize: 12,
                            },
                        },
                        //key和图间距
                        offset: 5,
                        //key文字大小
                        nameTextStyle: {
                            fontSize: 5,
                        },
                    },
                    series: [
                        {
                            //柱状图自动排序，排序自动让Y轴名字跟着数据动
                            realtimeSort: true,
                            name: '健康度',
                            type: 'bar',
                            data: barData,
                            barWidth: 20,
                            barGap: 10,
                            smooth: true,
                            valueAnimation: true,
                            //Y轴数字显示部分
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    valueAnimation: true,
                                    offset: [0, 2],
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                    },
                                },
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7,
                                },
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#3977E6' },
                                        { offset: 1, color: '#37BBF8' },
                                    ]),
                                },
                            },
                        },
                    ],
                }
                myChart.setOption(option)
                let that = this
                myChart.on('click', function (params) {
                    that.$router.push(`/index/devicedetails?device_id=${list[params.dataIndex]['device_id']}`)
                })
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        draw2() {
            requestApi('get', 'statistics/warnTop5').then((res) => {
                let list = res.data.data

                let myChart = echarts.init(this.$refs.content2)
                let cate = []
                let barData = []
                list.map((item) => {
                    cate.push(item.device_name)
                    barData.push(item.warn_count)
                })

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    //图表位置
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '3%',
                        top: '3%',
                        containLabel: true,
                    },
                    //X轴
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        //不显示X轴刻度线和数字
                        splitLine: { show: false },
                        axisLabel: { show: false },
                    },
                    yAxis: {
                        type: 'category',
                        data: cate,
                        //升序
                        inverse: true,
                        splitLine: { show: false },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA',
                                fontSize: 12,
                            },
                        },
                        //key和图间距
                        offset: 5,
                        //key文字大小
                        nameTextStyle: {
                            fontSize: 5,
                        },
                    },
                    series: [
                        {
                            //柱状图自动排序，排序自动让Y轴名字跟着数据动
                            realtimeSort: true,
                            name: '告警数量',
                            type: 'bar',
                            data: barData,
                            barWidth: 20,
                            barGap: 10,
                            smooth: true,
                            valueAnimation: true,
                            //Y轴数字显示部分
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    valueAnimation: true,
                                    offset: [0, 2],
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                    },
                                },
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7,
                                },
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#3977E6' },
                                        { offset: 1, color: '#37BBF8' },
                                    ]),
                                },
                            },
                        },
                    ],
                }
                myChart.setOption(option)
                let that = this
                myChart.on('click', function (params) {
                    that.$refs.list.doOpen(list[params.dataIndex])
                })
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        draw3() {
            requestApi('get', 'statistics/liehua').then((res) => {
                let list = res.data.data
                let myChart3 = echarts.init(this.$refs.content3)
                let cate = []
                let barData = []
                list.sort((a, b) => b.liehua - a.liehua)
                list.map((item) => {
                    cate.push(item.device_name)
                    barData.push(item.liehua)
                })
                let option3 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    //图表位置
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '3%',
                        top: '3%',
                        containLabel: true,
                    },
                    //X轴
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        //不显示X轴刻度线和数字
                        splitLine: { show: false },
                        axisLabel: { show: false },
                    },
                    yAxis: {
                        type: 'category',
                        data: cate,
                        //升序
                        inverse: true,
                        splitLine: { show: false },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#5187AA',
                                fontSize: 12,
                            },
                        },
                        //key和图间距
                        offset: 5,
                        //key文字大小
                        nameTextStyle: {
                            fontSize: 5,
                        },
                    },
                    dataZoom: [
                        {
                            // 设置滚动条的隐藏或显示
                            show: true,
                            // 设置类型
                            type: 'slider',
                            // 设置背景颜色
                            backgroundColor: 'rgb(19, 63, 100)',
                            // 设置选中范围的填充颜色
                            fillerColor: 'rgb(16, 171, 198)',
                            // 设置边框颜色
                            borderColor: 'rgb(19, 63, 100)',
                            // 是否显示detail，即拖拽时候显示详细数值信息
                            showDetail: false,
                            // 数据窗口范围的起始数值
                            startValue: 0,
                            // 数据窗口范围的结束数值（一页显示多少条数据）
                            endValue: 7,
                            // 控制哪个轴，如果是number表示控制一个轴，
                            // 如果是Array表示控制多个轴。此处控制第二根轴
                            yAxisIndex: [0, 1],
                            // empty：当前数据窗口外的数据，被设置为空。
                            // 即不会影响其他轴的数据范围
                            filterMode: 'filter',
                            // 滚动条高度
                            width: 8,
                            // 滚动条显示位置
                            height: '90%',
                            // 距离右边
                            right: 3,
                            // 控制手柄的尺寸
                            handleSize: 20,
                            // 是否锁定选择区域（或叫做数据窗口）的大小
                            zoomLock: true,
                            // 组件离容器上侧的距离
                            // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
                            top: 'middle',
                        },
                        {
                            // 没有下面这块的话，只能拖动滚动条，
                            // 鼠标滚轮在区域内不能控制外部滚动条
                            type: 'inside',
                            // 控制哪个轴，如果是number表示控制一个轴，
                            // 如果是Array表示控制多个轴。此处控制第二根轴
                            yAxisIndex: [0, 1],
                            // 滚轮是否触发缩放
                            zoomOnMouseWheel: false,
                            // 鼠标移动能否触发平移
                            moveOnMouseMove: true,
                            // 鼠标滚轮能否触发平移
                            moveOnMouseWheel: true,
                        },
                    ],
                    series: [
                        {
                            name: '劣化度',
                            type: 'bar',
                            data: barData,
                            barWidth: 20,
                            smooth: true,
                            valueAnimation: true,
                            //Y轴数字显示部分
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight',
                                    valueAnimation: true,
                                    offset: [0, 2],
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12,
                                    },
                                },
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7,
                                },
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        { offset: 0, color: '#3977E6' },
                                        { offset: 1, color: '#37BBF8' },
                                    ]),
                                },
                            },
                        },
                    ],
                }
                let that = this
                myChart3.on('click', function (params) {
                    that.$router.push(`/index/devicedetails?device_id=${list[params.dataIndex]['device_id']}`)
                })
                myChart3.setOption(option3)
            })
        },
        draw5() {
            requestApi('get', 'statistics/health').then((res) => {
                let list5 = [
                    {
                        name: '良好',
                        value: 0,
                    },
                    {
                        name: '及格',
                        value: 0,
                    },
                    {
                        name: '不及格',
                        value: 0,
                    },
                ]
                res.data.data.map((item) => {
                    if (item.health_grade >= 80) {
                        list5[0].value++
                    } else if (item.health_grade >= 60) {
                        list5[1].value++
                    } else {
                        list5[2].value++
                    }
                })
                let myChart5 = echarts.init(this.$refs.content5, 'light')
                let option5 = {
                    legend: {
                        orient: 'vertical',
                        top: '10%',
                        left: '6%',
                        textStyle: {
                            color: '#fff',
                        },
                        type: 'scroll',
                    },
                    graphic: [
                        {
                            type: 'text',
                            left: '58%', // 文本左上角的x坐标
                            top: '37%', // 文本左上角的y坐标
                            style: {
                                text: list5[0].value + list5[1].value + list5[2].value + '\n设备总数',
                                fontSize: '16px',
                                textAlign: 'center',
                                fill: '#fff',
                            },
                        },
                    ],
                    series: [
                        {
                            type: 'pie',
                            top: '5%',
                            radius: ['55%', '75%'],
                            center: ['65%', '40%'],
                            avoidLabelOverlap: true,
                            percentPrecision: 1,
                            label: {
                                show: true,
                                color: 'white',
                                position: 'outside',
                                width: 240,
                                overflow: 'break',
                                formatter: '{b}:{c}',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold',
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: list5,
                        },
                    ],
                }
                myChart5.setOption(option5)
                window.addEventListener('resize', function () {
                    myChart5.resize()
                })
            })
        },
        draw6() {
            requestApi('get', 'statistics/warn').then((res) => {
                let list = []
                res.data.data.map((item) => {
                    if (item.warn_count) {
                        list.push({
                            name: item.device_name,
                            value: item.warn_count,
                        })
                    }
                })
                let myChart = echarts.init(this.$refs.content6, 'light')
                let option = {
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'vertical',
                        top: '0%',
                        left: '7%',
                        textStyle: {
                            color: '#fff',
                        },
                        type: 'scroll',
                    },
                    series: [
                        {
                            //   name: '不同分工厂的设备占比',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            center: ['62%', '44%'],

                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                color: 'white',
                                position: 'inside',
                                width: 240,
                                overflow: 'break',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold',
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: list,
                        },
                    ],
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        draw7() {
            requestApi('get', 'statistics/liehuaRatio').then((res) => {
                let list7 = [
                    {
                        name: '未劣化',
                        value: res.data.data.health,
                    },
                    {
                        name: '劣化',
                        value: res.data.data.liehua,
                    },
                ]
                let myChart = echarts.init(this.$refs.content7, 'light')
                let option = {
                    legend: {
                        orient: 'vertical',
                        top: '10%',
                        left: '6%',
                        textStyle: {
                            color: '#fff',
                        },
                        type: 'scroll',
                    },
                    graphic: [
                        {
                            type: 'text',
                            left: '58%', // 文本左上角的x坐标
                            top: '37%', // 文本左上角的y坐标
                            style: {
                                text: res.data.data.total + '\n设备总数',
                                fontSize: '16px',
                                textAlign: 'center',
                                fill: '#fff',
                            },
                        },
                    ],
                    series: [
                        {
                            type: 'pie',
                            top: '5%',
                            radius: ['55%', '75%'],
                            center: ['65%', '40%'],
                            avoidLabelOverlap: true,
                            percentPrecision: 1,
                            label: {
                                show: true,
                                color: 'white',
                                position: 'outside',
                                width: 240,
                                overflow: 'break',
                                formatter: '{b}:{c}',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold',
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data: list7,
                        },
                    ],
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        pie_shuffling(option, myChart) {
            /**实现饼图轮播 */
            let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
            let Carousel_time = 500 //轮播时间
            myChart.changePieInterval = setInterval(selectPie, Carousel_time) // 设置自动切换高亮图形的定时器
            function highlightPie() {
                // 取消所有高亮并高亮当前图形
                // 遍历饼图数据，取消所有图形的高亮效果
                for (var idx in option.series[0].data)
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: idx,
                    })
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex,
                })
            }

            myChart.on('mouseover', (params) => {
                // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
                clearInterval(myChart.changePieInterval)
                currentIndex = params.dataIndex
                highlightPie()
            })

            myChart.on('mouseout', (params) => {
                // 用户鼠标移出时，重新开始自动切换
                if (myChart.changePieInterval) clearInterval(myChart.changePieInterval)
                myChart.changePieInterval = setInterval(selectPie, 500)
            })

            function selectPie() {
                // 高亮效果切换到下一个图形
                var dataLen = option.series[0].data.length
                currentIndex = (currentIndex + 1) % dataLen
                highlightPie()
            }
            /**实现饼图轮播 */
        },
    },
    mounted() {
        this.draw1()
        this.draw2()
        this.draw3()
        this.draw5()
        this.draw6()
        this.draw7()
        requestApi('get', 'statistics/liehuaFuture').then((res) => {})
    },
}
</script>
<style lang="less" scoped>
.energy {
    padding: 20px;
    height: 100%;
    .list {
        display: flex;
        align-items: center;
        height: 120px;
        > div {
            height: 60px;
            background-color: rgb(14, 33, 74) !important;
            backdrop-filter: blur(3px); //毛玻璃属性
            border: 1px solid #007bff !important;
            flex: 1;
            overflow: hidden;
            transition: all 0.4s;
            position: relative;
            cursor: pointer;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 18px;
            padding: 10px;
            justify-content: space-around;
            border-radius: 10px;
        }

        > div:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%) !important;
            // -webkit-transform: translate3d(0, -2px, 0);
            // transform: translate3d(0, -4px, 0);
            border: 1px solid #1cf4ff !important;
            box-shadow: 0 0 1rem rgba(28, 244, 255, 0.5) !important;
        }
    }
    .main {
        height: calc(100%);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        > div {
            background-color: rgba(19, 39, 76, 0.7);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
        }

        .title {
            margin: 20px 0 0 0;
            padding-left: 20px;
            color: #11b7a4;
            font-size: 20px;
            font-weight: 500;
            border-left: 5px solid #11b7a4;
        }

        .content {
            flex: 1;
            padding: 20px;
        }
    }
}
</style>
